<template>
    <view class="app-tabar">
        <view style="height: 110rpx;"></view>
        <view class="tabar safe-area-inset-bottom">
            <view class="dir-left-nowrap list">
                <view class="dir-top-nowrap box-grow-1 main-center cross-center list-item"
                    v-for="(item, index) in props.menu" :key="index">
                    <AppJumpButton :url="item.url" :params="item.params" :openType="item.open_type">
                        <view class="dir-top-nowrap main-center cross-center">
                            <view class="list-item-icon">
                                <AppImage :src="item.icon == activeUrl ? item.active_icon : item.icon">
                                </AppImage>
                            </view>
                            <text :class="[
                                'list-item-text',
                                item.url == activeUrl ? 'active' : ''
                            ]">{{ item.title }}</text>
                        </view>
                    </AppJumpButton>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang='ts' name="AppTabBar">
import AppImage from "@/components/AppImage/index.vue";
import AppJumpButton, { AppJumpButtonProps } from '@/components/AppJumpButton/index.vue';
import { tool } from '@/lib'
/**
 * AppTabBar 自定义TabBar
 * @description 自定义TabBar
 * @property {Array} menu 菜单数据
 */
export interface AppTabBarProps {
    /**菜单列表 */
    menu: {
        url: string
        open_type: AppJumpButtonProps['openType']
        icon: string
        active_icon: string
        title: string
        params: Record<string, any>
    }[]
}
export interface AppTabBarEmits {
    (e: 'click'): void
}

const props = withDefaults(defineProps<AppTabBarProps>(), {
})
const emit = defineEmits<AppTabBarEmits>()
const activeUrl = ref('')

onMounted(() => {
    activeUrl.value = tool.getRoute()
})

</script>

<style scoped lang="scss">
$color: #2979ff !default;

.app-tabar {
    .tabar {
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        height: 110rpx;
        overflow: hidden;
        z-index: 98;

        .list {
            position: relative;
            padding: 0 20rpx;
            height: 100%;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 2rpx;
                background-color: #f0f0f0;
            }

            .list-item {
                position: relative;

                .list-item-icon {
                    width: 50rpx;
                    height: 50rpx;
                }

                .list-item-text {
                    font-size: 26rpx;
                    line-height: 1.5;
                    margin-top: 5rpx;

                    &.active {
                        color: $color;
                    }
                }
            }
        }
    }
}
</style>